<!--
 * @Author: DUST
 * @Date: 2023-05-19 14:28:10
 * @LastEditors: DUST
 * @LastEditTime: 2023-06-29 09:35:44
 * @FilePath: \vite-project\src\views\browse\index\index.vue
 * @Description: 
 * undefined
-->
<template>
  <div class="browseIndex">
    <!-- banner -->
    <div class="banner">
      <waveSvg />
    </div>
    <!-- 热点信息 -->
    <div class="itemBox">
      <div class="hotNewsTitle">
        <span class="titleText"> 热搜榜单 </span>
        <span class="reload" @click="reloadHotNews(newsTypeList)">
          <reload-outlined />
        </span>
      </div>
      <div class="hotNewsBox">
        <div class="baidu hotNews">
          <template v-if="hotNews?.baidu">
            <div class="hotNewName">
              <img class="siteLogo" src="https://www.baidu.com/favicon.ico" alt="">
              百度热搜
            </div>
            <div class="HotNewsInfoBox">
              <div
                class="hotNewsItem"
                v-for="item of hotNews.baidu"
                :key="item.url"
              >
                <span class="index">{{ item.index }}</span>
                <a :href="item.url" target="_blank">{{ item.word }}</a>
              </div>
            </div>
          </template>
          <div class="loadingBox" v-else>
            <a-spin tip="别催啦，已经在拼老命加载了。。。" />
          </div>
        </div>
        <div class="baidu hotNews">
          <template v-if="hotNews?.weibo">
            <div class="hotNewName">
              <img class="siteLogo" src="https://s.weibo.com/favicon.ico" alt="">
              微博热搜
            </div>
            <div class="HotNewsInfoBox">
              <div
                class="hotNewsItem"
                v-for="item of hotNews.weibo"
                :key="item.url"
              >
                <span class="index">{{ item.index }}</span>
                <a :href="item.url" target="_blank">{{ item.word }}</a>
              </div>
            </div>
          </template>
          <div class="loadingBox" v-else>
            <a-spin tip="别催啦，已经在拼老命加载了。。。" />
          </div>
        </div>
        <div class="baidu hotNews">
          <template v-if="false">
            <div class="hotNewName">微博热搜</div>
            <div class="HotNewsInfoBox">
              <!-- <div
                class="hotNewsItem"
                v-for="item of hotNews.weibo"
                :key="item.url"
              >
                <span class="index">{{ item.index }}</span>
                <a :href="item.url" target="_blank">{{ item.word }}</a>
              </div> -->
            </div>
          </template>
          <div class="loadingBox" v-else>
            <a-spin tip="别催啦，已经在拼老命加载了。。。" />
          </div>
        </div>
        <div class="baidu hotNews">
          <template v-if="false">
            <div class="hotNewName">微博热搜</div>
            <div class="HotNewsInfoBox">
              <!-- <div
                class="hotNewsItem"
                v-for="item of hotNews.weibo"
                :key="item.url"
              >
                <span class="index">{{ item.index }}</span>
                <a :href="item.url" target="_blank">{{ item.word }}</a>
              </div> -->
            </div>
          </template>
          <div class="loadingBox" v-else>
            <a-spin tip="别催啦，已经在拼老命加载了。。。" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ReloadOutlined } from "@ant-design/icons-vue";
import { onMounted, ref } from "vue";
import waveSvg from "@/components/waveSvg.vue";
import Index from "./";

const { hotNews, gwtHotsNews, reloadHotNews } = Index;
const newsTypeList = ref<Array<string>>(["baidu", "weibo"]);

// 调用
onMounted(() => {
  gwtHotsNews(newsTypeList.value);
});
</script>

<style lang="less" scoped>
@contentWid: 1400px;
.browseIndex {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  .banner {
    width: 100%;
    height: 260px;
    // margin: 30px 0;
    // padding: 0 40px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.9);
    // border-radius: 12px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 4px 6px 2px #eee;
  }
  .hotNewsBox {
    width: @contentWid;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    // padding: 10px 30px;
    // box-sizing: border-box;
    .loadingBox {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hotNews {
      width: 320px;
      height: 510px;
      display: flex;
      flex-direction: column;
      padding: 5px 10px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 6px;
      box-shadow: 0 0 6px 2px #eee;
      position: relative;
      .hotNewName {
        width: 100%;
        font-size: 20px;
        text-align: left;
        padding: 10px;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        z-index: 2;
        line-height: 30px;
      }
      .HotNewsInfoBox {
        position: absolute;
        z-index: 1;
        top: 55px;
        width: 100%;
        height: calc(100% - 55px);
        overflow-y: auto;
        /*控制整个滚动条*/
        &::-webkit-scrollbar {
          width: 0;
          height: 0;
        }
      }
      .hotNewsItem {
        flex-shrink: 0;
        width: 100%;
        line-height: 30px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        text-align: left;
        user-select: none;
        .index {
          display: inline-block;
          width: 30px;
        }
        a {
          color: #333;
        }
        & a:visited {
          color: #a57878;
        }
        &:nth-child(1) .index {
          color: #ff5e66;
          font-size: 18px;
        }
        &:nth-child(2) .index {
          color: #ff7418;
          font-size: 18px;
        }
        &:nth-child(3) .index {
          color: #f1bb69;
          font-size: 18px;
        }
      }
    }
  }
}
</style>
